from nicegui import ui

ui.add_css(".ex-dynamic-box > div > .nicegui-card {margin: 1px;}")


# 可切换显示的容器
class DynamicBox(ui.grid):
    def __init__(self) -> None:
        super().__init__()

        self.classes(
            "ex-dynamic-box transition-all duration-500 ease-in-out w-full"
        ).style("grid-template-rows: 0fr;overflow: hidden;opactiy: 0;")

        self._box = ui.column().classes("min-h-0 w-full")
        self._box.move(self)

    def __enter__(self):
        self._box.__enter__()
        return self

    def __exit__(self, *args):
        return self._box.__exit__(*args)

    def set_visible(self, visible: bool):
        self._style["grid-template-rows"] = "1fr" if visible else "0fr"
        self._style["overflow"] = "visible" if visible else "hidden"
        self._style["opacity"] = "1" if visible else "0"
        self.update()
        return self

    def toggle(self):
        return self.set_visible(not self._style["grid-template-rows"] == "1fr")


# ==============================
with ui.header(elevated=True):
    ui.button("test", on_click=lambda: box.toggle())


with ui.right_drawer(fixed=False).style("background-color: #ebf1fa").props(
    "bordered"
) as right_drawer:
    ui.label("RIGHT DRAWER")


with DynamicBox() as box:
    with ui.card().classes("w-full"):
        ui.label("Hello")
        ui.label("World")


with ui.grid().classes("overflow-hidden"):
    with ui.column().classes("min-h-0 w-full p-0"):
        with ui.card():
            ui.label("Card 1")
            ui.label("Card 2")

for i in range(10):
    with ui.card().classes("m-1"):
        ui.label(f"Item {i}")


ui.run()
